<template>
  <div class="base-wrap">
    <div class="content">
      <div class="base-title">操作日志</div>
      <search
        show-export
        :data="searchData"
        @search-reset="reset"
        @search-submit="searchSubmit"
        @add="
          () => {
            dialogVisible = true
          }
        "
      />
      <com-table :columns="columns" :data="listData" :loading="loading"> </com-table>
      <el-pagination
        v-if="listData.length !== 0"
        :current-page.sync="defaultParams.pageNum"
        :page-sizes="pageSizes"
        :page-size="defaultParams.pageSize"
        class="com-table-pagination"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import tableMixins from '@mixins/table-mixins'
import { deepClone } from '@/utils'

export default {
  name: 'SysLog',
  components: {},
  mixins: [tableMixins],
  data() {
    return {
      pageSizes: [50, 100, 200, 500],
      pageSize: '50',
      defaultParams: {
        pageNum: 1,
        pageSize: 50
      },
      columns: [
        { key: 'route', title: '接口地址' },
        { key: 'userName', title: '操作用户', width: '120px' },
        { key: 'requestIp', title: '访问ip', width: '100px' },
        { key: 'requestMethod', title: '请求类型', width: '80px' },
        { key: 'userAgent', title: '浏览器信息' },
        { key: 'status', title: '状态码', width: '80px' },
        {
          key: 'resultText',
          title: '返回数据',
          width: '500px',
          align: 'left',
          headerAlign: 'center',
          render(h, params, index) {
            return h('div', {
              domProps: {
                innerHTML: params.resultText.replace(/\\n /gi, '<br/>&nbsp;&nbsp;&nbsp;')
              }
            })
          }
        },
        { key: 'createTime', title: '请求时间', width: '150px' }
      ],
      searchData: [
        { type: 'input', field: 'route', label: '接口地址', placeholder: '请输入接口地址', clearable: true },
        { type: 'input', field: 'requestIp', label: '请求IP', placeholder: '请输入请求IP', clearable: true },
        { type: 'input', field: 'userName', label: '操作用户', placeholder: '请输入操作用户', clearable: true },
        {
          type: 'select',
          field: 'requestMethod',
          label: '请求类型',
          placeholder: '请选择请求类型',
          clearable: true,
          options: []
        },
        {
          type: 'select',
          field: 'status',
          label: '请求状态码',
          placeholder: '请选择请求状态码',
          clearable: true,
          options: []
        },
        {
          type: 'select',
          field: 'result',
          label: '请求结果',
          placeholder: '请选择请求结果',
          clearable: true,
          options: [
            { label: '成功', value: 1 },
            { label: '失败', value: -1 }
          ]
        }
      ]
    }
  },
  filters: {},
  // 监听属性 类似于data概念
  computed: {},
  watch: {},
  created() {
    // 筛选字典
    this.getdic()
  },
  mounted() {},
  // 方法集合
  methods: {
    async getdic() {
      const dic = await this.$api.sysLog.sysLogDic()
      this.searchData[3].options = dic.method
      this.searchData[4].options = dic.status
    }
  }
}
</script>
<style lang="less" scoped>
// @import url();
</style>
